<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>添加用户</title>
  <link rel="stylesheet" th:href="@{/layui-v2.6.8/css/layui.css}" href="/static/layui-v2.6.8/css/layui.css">
</head>
<body>
<div style="padding: 15px;">
  <form class="layui-form form-position"  method="post" id="from-data">
    <div class="layui-form-item">
      <label class="layui-form-label">用户名</label>
      <div class="layui-input-block">
        <input type="text" name="userName" th:field="${user.userName}" required  lay-verify="required" placeholder="请输入用户名" autocomplete="off" class="layui-input layui-input-width">
        <input type="text" name="id" style="display: none" th:field="${user.id}" placeholder="请输入用户名" autocomplete="off" class="layui-input layui-input-width">
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">密&emsp;码</label>
      <div class="layui-input-block">
        <input type="text" name="password" placeholder="请输入密码" autocomplete="off" class="layui-input layui-input-width">
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">性&emsp;别</label>
      <div class="layui-input-block">
        <input type="radio" name="sex" th:each="dictState,dictStateStat:${systemUserType}"  required  lay-verify="required" th:field="${user.sex}" th:value="${dictState.dictKey}" th:title="${dictState.dictTitle}" checked="">
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">角&emsp;色</label>
      <div class="layui-input-block">
        <select name="roleId" lay-filter="aihao" th:field="${user.roleId}">
          <option th:each="roleList:${roleList}" th:value="${roleList.id}" th:text="${roleList.roleName}"></option>
        </select>
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">部&emsp;门</label>
      <div class="layui-input-block">
        <select name="depId" lay-filter="aihao" th:field="${user.depId}">
          <option th:value="0">无部门</option>
          <option th:each="depList:${depList}" th:value="${depList.id}" th:text="${depList.depName}"></option>
        </select>
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">昵&emsp;称</label>
      <div class="layui-input-block">
        <input type="text" name="userNick" th:field="${user.userNick}" required  lay-verify="required" placeholder="请输入昵称" autocomplete="off" class="layui-input layui-input-width">
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">状态</label>
      <div class="layui-input-block">
        <input type="radio" name="enable" th:each="dictState,dictStateStat:${systemSwitchType}"  required  lay-verify="required" th:field="${user.enable}" th:value="${dictState.dictKey}" th:title="${dictState.dictTitle}" checked="">
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">头&emsp;像</label>
      <div class="layui-input-block">
        <div class="layui-upload">
          <button type="button" class="layui-btn" id="test1">上传图片</button>
          <div class="layui-upload-list">
            <img class="layui-upload-img" th:src="${user.userPicture}" style="width: 100px;" id="demo1">
            <p id="demoText"></p>
          </div>
          <div style="width: 95px;">
            <div class="layui-progress layui-progress-big" lay-showpercent="yes" lay-filter="demo">
              <div class="layui-progress-bar" lay-percent=""></div>
            </div>
          </div>
        </div>

        <a name="list-progress"> </a>
        <input type="text" id="userPicture" style="display:none " name="userPicture" th:field="${user.userPicture}"  autocomplete="off" class="layui-input layui-input-width">
      </div>
    </div>
    <div class="layui-form-item">
      <div class="layui-input-block">
        <button class="layui-btn" id="form_submit_button_01" lay-submit lay-filter="formSubmit">保存</button>
        <button type="reset" th:if="${user.id == null}" class="layui-btn layui-btn-primary">重置</button>
      </div>
    </div>

  </form>
</body>
<!-- 引入 layui.js -->
<script th:src="@{/layui-v2.6.8/layui.js}" src="/static/layui-v2.6.8/layui.js"></script>
<script th:src="@{/jquery-3.5.1/jquery-3.5.1.min.js}" src="/static/jquery-3.5.1/jquery-3.5.1.min.js"></script>
<script th:src="@{/ajaxSubmit.js}" src="/static/jquery-3.5.1/jquery-3.5.1.min.js"></script>

<script>
  layui.use(function(){
    var layer = layui.layer
            ,form = layui.form,upload = layui.upload
            ,element = layui.element;
    //layer.msg('Hello World');
    //常规使用 - 普通图片上传
    var uploadInst = upload.render({
      elem: '#test1'
      ,url: '/amin/user/updatePicture' //改成您自己的上传接口
      ,before: function(obj){
        //预读本地文件示例，不支持ie8
        obj.preview(function(index, file, result){
          $('#demo1').attr('src', result); //图片链接（base64）
        });

        element.progress('demo', '0%'); //进度条复位
        layer.msg('上传中', {icon: 16, time: 0});
      }
      ,done: function(res){
        console.log(res)
        //如果上传失败
        if(res.code > 0){
          return layer.msg('上传失败');
        }
        $('#userPicture').val(res.url)
        //上传成功的一些操作
        //……
        $('#demoText').html(''); //置空上传失败的状态
      }
      ,error: function(){
        //演示失败状态，并实现重传
        var demoText = $('#demoText');
        demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
        demoText.find('.demo-reload').on('click', function(){
          uploadInst.upload();
        });
      }
      //进度条
      ,progress: function(n, elem, e){
        element.progress('demo', n + '%'); //可配合 layui 进度条元素使用
        if(n == 100){
          layer.msg('上传完毕', {icon: 1});
        }
      }
    });
      //监听提交
      form.on('submit(formSubmit)', function(data){
          //$("#form_submit_button_01").attr('disabled',false);
          var url = '/amin/user/dataSubmit';
          var data =$("#from-data").serialize();
          ajaxSubmit(url,data,"","");
          layer.msg('操作成功，正在跳转......');
          var index = parent.layer.getFrameIndex(window.name); //获取窗口索引
          parent.layer.close(index);
          parent.location.reload();
      });
  });
</script>
</html>